<template>
	<view class="activeDetailPage">
		<base-nav-bar :backIconColor="'#333'" :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				商品详情
			</text>
		</base-nav-bar>
		<view class="banner">
			<image class="img" :src="obj.image"></image>
		</view>
		<view class="activeContent">
			<view class="title">
				{{ obj.name }}
			</view>
			<view class="acitveTime u-m-t-20">
				{{ obj.description }}
			</view>
			<view class="acitveTime u-m-t-20 u-flex u-flex-between u-flex-items-center">
				<view class="red">￥{{ obj.price }}</view>
				<view class="green">{{ obj.sales? obj.sales + '人购买' : '暂无购买' }}</view>
			</view>
		</view>
		<view class="activeContent u-m-t-20 goodDesc">
			<view class="title">商品描述</view>
			<view class="acitveHite">
				{{ obj.content }}
			</view>
		</view>
	</view>
</template>

<script>
import { HTTP_IMG_URL } from "../../config/app.js";
import { mapGetters } from "vuex";
import BaseNavBar from "@/components/BaseNavBar.vue";
export default {
	components: {BaseNavBar},
	data() {
		return {
			customBar: 99,
			obj: {},
		};
	},
	computed: mapGetters(["isLogin", "uid", "userInfo"]),
	onLoad(params) {
		this.getDetail(params.id);
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL;
		},
		getDetail(id) {
			let that = this;
			that.$Api.merchant.goodsEdit({
					id: id,
				})
				.then((res) => {
					this.obj = res.data;
					console.log(res.data, 23);
				});
		},
	},
};
</script>

<style lang="scss">
.activeDetailPage {
	height: 100%;
	min-height: 100vh;
	font-family: PingFang SC;
	background: #f5f5f4;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	.head {
		background: #fff;
	}
	.banner {
		width: 100%;
		height: 420rpx;
		.img {
			width: 100%;
			height: 100%;
		}
	}
	.activeContent {
		width: 100%;
		background: #fff;
		padding: 26rpx 38rpx;
		box-sizing: border-box;
		text-align: justify;
		.title {
			display: flex;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
			align-items: center;
		}
		.activeimg {
			margin-top: 20rpx;
			width: 100%;
		}
		.acitveTime {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #999ca7;
			display: flex;
			margin-top: 24rpx;
			.green {
				font-size: 24rpx;
				color: #30AA4D;
				line-height: 18px;
				background: rgba(48,170,77,0.1);
				border-radius: 3px;
				padding: 6rpx 14rpx;
			}
			.red {
				font-size: 38rpx;
				color: #FD463E;
			}
		}
		.acitveHite {
			font-size: 28rpx;
			color: #999ca7;
			line-height: 48rpx;
			margin-top: 18rpx;
		}
		.acitveMsg {
			display: flex;
			justify-content: space-between;
		}
		.acitveMsg:nth-child(2) {
			margin-left: 120rpx;
		}
	}
	.goodDesc{
		min-height: 50vh;
	}
	.footer {
		width: 100%;
		height: 190rpx;
		position: fixed;
		// bottom: calc(env(safe-area-inset-bottom) / 2);
		bottom: 0;
		background: #fff;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx 38rpx;
		box-sizing: border-box;
		
		.money {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			background: #a3c616;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(163, 198, 22, 0.3);
			border-radius: 24rpx;
			font-weight: 500;
			font-size: 34rpx;
			margin-top: 18rpx;
		}
	}
}
</style>
